<template>
	<view>
		<view class="swiper_container">
			<swiper class="find_swiper" :autoplay="true" indicator-active-color="#07a0aa" indicator-color="rgba(255,255,255,0.3)"
			 :indicator-dots="true" :interval="5000" :duration="300" :circular="true">
				<swiper-item v-for="(item, index) in banners" @click="handleClickSwiperItem(item)" :key="index">
					<view class="banner_img" :style="{ backgroundImage: 'url(' + item.pic + ')' }">
						<view :class="{ red: item.titleColor == 'red', blue: item.titleColor == 'blue' }" class="label">{{ item.typeTitle }}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<scroll-view :scroll-x="true" class="tabs flex-center">
			<view @click="handeTabTo(item)" class="tab" v-for="(item, index) in tabs" :key="index">
				<view :style="{ backgroundPosition: item.backgroundPosition }" class="tabIcon"></view>
				<text>{{ item.title }}</text>
			</view>
		</scroll-view>
		<view class="bottomPaddingContainer">
			<view class="personalized">
				<view class="jc-between ai-center">
					<view class="personalizedTitle">
						宝藏歌单，值得聆听
					</view>
					<view class="borderBtn">
						<u-icon style="margin-right: 2px;" name="play-right-fill"></u-icon>
						播放全部
					</view>
				</view>
				<scroll-view :scroll-x="true" class="pers">
					<view class="perItem" v-for="(item,index) in personalizedList">
						<view :style="{backgroundImage: 'url('+item.picUrl+')'}">
							<view class="playCount">
								<u-icon style="margin-right: 2px;" color="#fff" name="play-right"></u-icon>
								<text>{{item.playCount|playCount}}</text>
							</view>
						</view>
						<view>
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getBanner
	} from '@/api/common.js';
	import {
		mapMutations
	} from 'vuex';
	import {
		getPersonalized
	} from '../../api/songSheet'
	export default {
		props:{
			userDetail: {
				type: Object,
				default: ()=>({profile:{}})
			}
		},
		data() {
			return {
				banners: [],
				tabs: [{
						backgroundPosition: '0 0',
						title: '每日推荐'
					},
					{
						backgroundPosition: '16.7% 0',
						title: '歌单'
					},
					{
						backgroundPosition: '33.3% 0',
						title: '排行榜'
					},
					{
						backgroundPosition: '49.9% 0',
						title: '私人FM'
					},
					{
						backgroundPosition: '66.6% 0',
						title: '直播'
					},
					{
						backgroundPosition: '83.3% 0',
						title: '数字专辑'
					},
					{
						backgroundPosition: '100% 0',
						title: '畅聊'
					}
				],
				personalizedList: []
			};
		},
		created() {
			this.getBanner();
			this.getPersonalized();
		},
		methods: {
			...mapMutations(['changeMusicInfo']),
			async getBanner() {
				const res = await getBanner({
					type: 2,
					timestamp: new Date().getTime()
				});
				this.banners = res.banners;
			},
			async getPersonalized() {
				const res = await getPersonalized({
					limit: 6
				})
				this.personalizedList = res.result
			},
			handeTabTo(item) {
				let url = ""
				switch (item.title) {
					case '每日推荐':
						url = "/pages/find/dailyRec?backgroundUrl="+this.userDetail.profile.backgroundUrl
						break;
				}
				if (!url) {
					return false
				}
				uni.navigateTo({
					url
				})
			},
			handleClickSwiperItem(swiperItem) {
				if (swiperItem.targetType == 1) {
					this.changeMusicInfo({
						musicId: swiperItem.targetId
					})
					uni.navigateTo({
						url: `/pages/play/play?play=true&musicId=${swiperItem.targetId}`
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	.swiper_container {
		width: 700upx;
		height: 270upx;
		margin-left: 50%;
		transform: translateX(-50%);
		margin-bottom: 8px;

		/deep/.uni-swiper-dots-horizontal {
			bottom: 3%;
		}

		.find_swiper {
			width: 100%;
			height: 100%;
			background-color: #dedede;
			border-radius: 12upx;

			.banner_img {
				background-size: cover;
				background-repeat: no-repeat;
				width: 100%;
				height: 100%;
				border-radius: 12upx;
				position: relative;

				.label {
					position: absolute;
					bottom: 0;
					right: 0;
					color: white;
					padding: 2px 9px;
					box-sizing: border-box;
					border-top-left-radius: 12upx;
					border-bottom-right-radius: 12upx;
				}

				.red {
					background-color: $primary;
				}

				.blue {
					background-color: #4a9bc6;
				}
			}
		}
	}

	.tabs {
		width: 750upx;
		padding: 6px 10px;
		box-sizing: border-box;
		justify-content: space-between;

		/deep/.uni-scroll-view-content {
			display: flex;
		}

		.tab {
			width: 18.4%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			flex-shrink: 0;

			.tabIcon {
				background-image: url(../../static/find/tab.png);
				background-repeat: no-repeat;
				background-size: cover;
				width: 59%;
				margin-bottom: 3px;
				padding-top: 59%;

				&:active {
					filter: brightness(0.9);
				}
			}

			>text {
				font-size: 12px;
			}
		}
	}

	.bottomPaddingContainer {
		padding: 0 16px;

		.personalized {
			>view:first-child {
				padding: 12px 0;

				.personalizedTitle {
					font-size: 16px;
					font-weight: bold;
				}

				.borderBtn {
					@include borderBtn();
				}
			}

			.pers {
				width: 750upx;
				box-sizing: border-box;
				justify-content: space-between;
				width: 100%;

				/deep/.uni-scroll-view-content {
					display: flex;
				}

				.perItem {
					display: flex;
					flex-direction: column;
					width: 28vw;
					padding-right: 12px;
					box-sizing: content-box;

					>view:first-child {
						width: 28vw;
						height: 28vw;
						border-radius: 6px;
						@include bgRepeate_none();
						position: relative;

						.playCount {
							color: #fff;
							font-size: 12px;
							position: absolute;
							right: 2px;
							top: 2px;
						}
					}

					>view:last-child {
						font-size: 12px;
						line-height: 150%;
						margin-top: 5px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			}
		}
	}
</style>
